<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Example 1.0</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <form>
        <label>查询项目: <input v-model="subsidy_project_name" placeholder="请输入想要查询的项目名..."></label>
        <input type="button" value="search" v-on:click="searchByName">
    </form>

    <table>
        <thead><tr>
            <th>
                <input type="checkbox" name="checkall"  lay-skin="primary">
                全选
            </th>
            <th>编号</th>
            <th>补贴项目名称</th>
            <th>所属资金项目</th>
            <th>业务归口单位<br/>(乡镇)</th>
            <th>业务管理单位<br/>(县级)</th>
            <th>启用标志</th>
            <th>操作</th>
        </tr></thead>

        <tbody>
        <tr v-for="(subsidy,index) in subsidies">
            <td><input type="checkbox"></td>
            <td>{{subsidy.subsidyId}}</td>
            <td>{{subsidy.subsidyProjectName}}</td>
            <td>{{subsidy.subsidySubjectId}}</td>
            <td>{{subsidy.countrysideDepartmentId}}</td>
            <td>{{subsidy.cityDepartmentId}}</td>
            <td>{{subsidy.flag}}</td>
            <td>
                <input type="button" v-on:click="subsidyDelete(index)" value="删除">
            </td>
        </tr>
        </tbody>
    </table>

    <br>

    <div>
        <h1>添加新的项目</h1>
        <form id="add_form">
            <label>补贴项目名称<input type="text" name="subsidy_project_name"></label><br>
            <label>所属资金项目编号<input type="text" name="subsidy_subject_id"></label><br>
            <label>业务归口单位编号<input type="text" name="countryside_department_id"></label><br>
            <label>业务管理单位编号<input type="text" name="city_department_id"></label><br>
            <label>启用标志<input type="checkbox" name="flag"></label><br>
            <input v-on:click="subsidyAdd" type="button" value="增加"><br>
        </form>
    </div>

    <div>
        <h1>修改现有的项目(覆盖)</h1>
        <form id="revise_form">
            <label>项目编号<input type="text" name="subsidy_id"></label><br>
            <label>补贴项目名称<input type="text" name="subsidy_project_name"></label><br>
            <label>所属资金项目编号<input type="text" name="subsidy_subject_id"></label><br>
            <label>业务归口单位编号<input type="text" name="countryside_department_id"></label><br>
            <label>业务管理单位编号<input type="text" name="city_department_id"></label><br>
            <label>启用标志<input type="checkbox" name="flag"></label><br>
            <input v-on:click="subsidyRevise" type="button" value="修改"><br>
        </form>
    </div>


</div>
</body>
<script>

    var app = new Vue({
        el: '#app',
        data:{
            subsidy_project_name:'',
            subsidies:null
        },
        methods:{

            searchByName: function (event){
                axios
                    .get('/hmzd-single-form/SubsidySearchServlet?subsidy_project_name=' + this.subsidy_project_name)
                    .then(response => (this.subsidies = response.data))
                    .catch(function (error){console.log('error')});
            },

            subsidyAdd: function (event){
                var reqStr = $("#add_form").serialize();
                console.log(reqStr);
                axios
                    .post('/hmzd-single-form/SubsidyAddServlet?' + reqStr)
                    .then(function (){console.log("ok");})
                    .catch(function (error){console.log('error')})

            },

            subsidyRevise: function (event){
                var reqStr = $("#revise_form").serialize();
                axios
                    .post('/hmzd-single-form/SubsidyReviseServlet?' + reqStr)
                    .then(function (){console.log("ok");})
                    .catch(function (error){console.log('error')})
            },

            subsidyDelete(index){

                //在后台删除元素
                 axios
                     .get('/hmzd-single-form/SubsidyDelServlet?subsidy_id=' + this.subsidies[index].subsidyId)
                     .then(this.subsidies.splice(index,1))
                     .catch(function (error){console.log('error')});
            }
        }
    });

</script>
</html>